<template>
	<view class="container">
		<u-navbar 
			title="排行榜" 
			bgColor="rgba(255,255,255,1)" 
			leftIconColor="#000"
			titleStyle="color:#000;font-weight: bold;"
		></u-navbar>
		<z-paging
			ref="paging"
			v-model="dataList"
			@query="getList" 
			auto-show-back-to-top  
		>
			<template v-slot:top>
				<view :style="{'margin-top': sHeight}"></view>
			</template>
			<view class="bgImg">
				<image class="bgImg" src="http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1711534327475.png" mode=""></image>
				<view class="topText flex_clm justify-btw align-start" style="width: 100%;">
					<image style="width: 314rpx;height:130rpx;" src="http://shejihm.oss-cn-beijing.aliyuncs.com/202404071358361712469516014c5c9fdb8.png" mode=""></image>
					<text class="text_11" style="margin-left: 28rpx;letter-spacing: 10rpx;">
						最新更新时间:
						<text style="letter-spacing: normal;">{{ currentTime }}</text>
					</text>
					
				</view>
			</view>
			
			<view class="bgView"></view>
			<view class="content">
				<!-- 顶部排名 -->
				<view class="ranking flex justify-around">
					<view class="ranking_2 flex-1">
						<view class="top flex flex_clm justify-end align-center">
							<image 
								class="avatar" 
								:src="dataList.length>=2 ? dataList[1].userInfo.avatar : '/static/images/null_avatar.jpg'" 
								mode=""
							></image>
							<image class="icon" src="http://shejihm.oss-cn-beijing.aliyuncs.com/2024040817202517125680258884114f6fc.png" mode=""></image>
						</view>
						<view class="bottom flex flex_clm justify-start align-center">
							<text>{{ dataList.length>=2 ? dataList[1].userInfo.nickname : '暂无' }}</text>
							<text>{{ dataList.length>=2 ? dataList[1].price : '--' }}</text>
							<text>{{ dataList.length>=2 ? dataList[1].peopleNum+'人' : '--' }}</text>
						</view>
					</view>
					<view class="ranking_1">
						<view class="top flex flex_clm justify-end align-center">
							<image
								class="avatar" 
								:src="dataList.length>=1 ? dataList[0].userInfo.avatar : '/static/images/null_avatar.jpg'" 
								mode=""
							></image>
							<image style="left: 48rpx;" class="icon" src="http://shejihm.oss-cn-beijing.aliyuncs.com/2024040817201017125680105085f7093c4.png" mode=""></image>
						</view>
						<view class="bottom flex flex_clm justify-start align-center">
							<text>{{ dataList.length>=1 ? dataList[0].userInfo.nickname : '暂无' }}</text>
							<text>{{ dataList.length>=1 ? dataList[0].price : '--' }}</text>
							<text>{{ dataList.length>=1 ? dataList[0].peopleNum+'人' : '--' }}</text>
						</view>
					</view>
					<view class="ranking_3 flex-1">
						<view class="top flex flex_clm justify-end align-center">
							<image
								class="avatar" 
								:src="dataList.length>=3 ? dataList[2].userInfo.avatar : '/static/images/null_avatar.jpg'" 
								mode=""
							></image>
							<image class="icon" src="http://shejihm.oss-cn-beijing.aliyuncs.com/2024040817204417125680443281501e67b.png" mode=""></image>
						</view>
						<view class="bottom flex flex_clm justify-start align-center">
							<text>{{ dataList.length>=3 ? dataList[2].userInfo.nickname : '暂无' }}</text>
							<text>{{ dataList.length>=3 ? dataList[2].price : '--' }}</text>
							<text>{{ dataList.length>=3 ? dataList[2].peopleNum+'人' : '--' }}</text>
						</view>
					</view>
				</view>
				<!-- 表头 -->
				<view class="table-title flex justify-btw align-left">
					<view style="flex:2">
						<view class="demo-layout">排名</view>
					</view>
					<view style="flex:4">
						<view class="demo-layout" style="text-align: left;">用户</view>
					</view>
					<view style="flex:3">
						<view class="demo-layout">邀请人数</view>
					</view>
					<view style="flex:3">
						<view class="demo-layout">业绩</view>
					</view>
				</view>
				<block v-if="dataList.length>0">
					<!-- 表格 -->
					<view 
						class="table flex justify-btw align-left"
						v-for="(item, index) in (dataList.length>3 ? dataList.slice(3) : [])"
						:key="item.id"
					>
						<view class="demo-layout1 flex justify-center align-center" style="flex: 2;">
							<view class="circle flex justify-center align-center">{{ index + 4 }}</view>
						</view>
						<view class="demo-layout2 flex justify-start align-center" style="flex: 4;text-align: left;">
							<image style="width: 88rpx;height: 88rpx;border-radius: 50%;margin-right: 28rpx;flex-shrink: 0;" :src="item.userInfo.avatar || '/static/images/null_avatar.jpg'" mode="aspectFill"></image>
							<text class="text_12">{{ item.userInfo.nickname }}</text>
						</view>
						<view class="demo-layout3 flex justify-center align-center" style="flex: 3;text-align: center;">
							<text class="text_13">{{ item.peopleNum }}</text>
						</view>
						<view class="demo-layout4 flex justify-center align-center" style="flex: 3;text-align: center;">
							<text class="text_13">{{ item.price }}</text>
						</view>
					</view>
				</block>
			</view>
		</z-paging>
		<!-- 底部占位 -->
		<view style="height: 150rpx;"></view>
		<view class="bottom_btn">
			<!-- 表格 -->
			<view class="table flex justify-btw align-left">
				<view class="demo-layout1 flex justify-center align-center" style="flex: 2;">
					<view class="circle flex justify-center align-center">{{ myData.ranking }}</view>
				</view>
				<view class="demo-layout2 flex justify-start align-center" style="flex: 4;text-align: left;">
					<image style="width: 88rpx;height: 88rpx;border-radius: 50%;margin-right: 28rpx;flex-shrink: 0;" :src="myData.userInfo.avatar || '/static/images/null_avatar.jpg'" mode="aspectFill"></image>
					<text class="text_12">{{ '我' }}</text>
				</view>
				<view class="demo-layout3 flex justify-center align-center" style="flex: 3;text-align: center;">
					<text class="text_13">{{ myData.peopleNum }}</text>
				</view>
				<view class="demo-layout4 flex justify-center align-center" style="flex: 3;text-align: center;">
					<text class="text_13">{{ myData.price }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, computed } from 'vue';
import { onLoad, onUnload, onShow } from "@dcloudio/uni-app"
const {proxy} = getCurrentInstance()
const dataList = ref([])
const myData = ref({})
const currentTime = ref('')
const sHeight = ref('')
// const emptyText = '没有更多了'
// const empty = 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1663661926837.png'
	
onLoad(()=>{
	getStatusHeight()
	getMyInfo()
})
function getMyInfo(){
	proxy.api.myPromotionRanking({}).then(res=>{
		console.log('我的',res)
		myData.value = res.data.data
	})
}
function getStatusHeight() {
	sHeight.value = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
}
function getList(pageNo, pageSize){
	let query = {
		pageNo: pageNo,
		pageSize
	}
	proxy.api.promotionRankingList(query).then(res=>{
		currentTime.value = proxy.utils.formatFullTime(new Date())
		proxy.$refs.paging.complete(res.data.data.records);
		// proxy.$refs.paging.complete([
			// {
			// 	userInfo: {
			// 		nickname:'彭勃2',
			// 		avatar:''
			// 	},
			// 	peopleNum:'1',
			// 	price:'222',
			// 	id:1
			// },
			// {
			// 	userInfo: {
			// 		nickname:'彭勃2',
			// 		avatar:''
			// 	},
			// 	peopleNum:'2',
			// 	price:'222',
			// 	id:2
			// },
			// {
			// 	userInfo: {
			// 		nickname:'彭勃2',
			// 		avatar:''
			// 	},
			// 	peopleNum:'3',
			// 	price:'222',
			// 	id:3
			// },
			// {
			// 	userInfo: {
			// 		nickname:'一大只蜥蜴蜥蜴',
			// 		avatar:''
			// 	},
			// 	peopleNum:'4',
			// 	price:'222',
			// 	id:4
			// },
			// {
			// 	userInfo: {
			// 		nickname:'彭勃2',
			// 		avatar:''
			// 	},
			// 	peopleNum:'5',
			// 	price:'222',
			// 	id:5
			// },
		// ]);
	}).catch(err=>{
		
	})
}
</script>

<style lang="scss">
	.text_11{
		@include str(22rpx, 500, #fff);
		line-height: 30rpx;
	}
	.text_12{
		@include str(30rpx,bold, #333);
		line-height: 42rpx;
	}
	.text_13{
		@include str(28rpx, 800, $uni-color-primary);
		line-height: 40rpx;
	}
	.bgImg {
		position: relative;
		width: 100vw;
		height: 360rpx;
	}
	.topText{
		position: absolute;
		top: 42rpx;
	}
	.bgView {
		width: 100vw;
		height: 192rpx;
		background: $uni-bg-color-grey;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		top: -50rpx;
	}
	.circle{
		width: 64rpx;
		height: 64rpx;
		background: rgba(59, 140, 220, 0.39);
		border-radius: 50%;
		opacity: 0.16;
	}

	.container {
		border-top: 1rpx solid #f4f4f4;
		width: 100%;
		background-color: #fff;
		position: relative;

		.content {
			width: calc(100vw - 40rpx);
			margin-left: 20rpx;
			min-height: 200px;
			position: relative;
			top: -280rpx;

			// 顶部三个排名
			.ranking {
				position: relative;

				// top: -180rpx;
				.top {
					height: 50%;
				}

				.bottom {
					height: 50%;

					&>text:nth-child(1) {
						@include str(28rpx, bold, #333);
						line-height: 40rpx;
						margin-bottom: 12rpx;
						margin-top: 28rpx;
					}

					&>text:nth-child(2) {
						@include str(36rpx, bold, $uni-color-primary);
						line-height: 50rpx;
						margin-bottom: 3rpx;
					}

					&>text:nth-child(3) {
						@include str(24rpx, bold, #999);
						line-height: 33rpx;
					}
				}

				.top,
				.bottom {
					width: 100%;
					// border: 1px solid red;
					position: relative;
				}

				.top>image.avatar {
					width: 126rpx;
					height: 126rpx;
					border-radius: 50%;
				}

				.top>image.icon {
					width: 105rpx;
					height: 105rpx;
					border-radius: 50%;
					position: absolute;
					top: 23rpx;
					left: 19rpx;
				}

				&_2 {
					min-height: 400rpx;
					background-color: #fff;
					border-radius: 18rpx 4rpx 0 0;

					.top {}
				}

				&_1 {
					min-height: 400rpx;
					background-color: #fff;
					width: 278rpx;
					border-radius: 18rpx 18rpx 0 0;
					position: relative;
					top: -45rpx;

					.top {
						box-shadow: 0rpx -12rpx 16rpx rgba(0, 0, 0, 0.1);
					}
				}

				&_3 {
					background-color: #FFFFFF;
					min-height: 400rpx;
					border-radius: 4rpx 18rpx 0 0;

					.top {}
				}
			}

			.table-title {
				width: 100%;
				line-height: 80rpx;
				box-shadow: 0px 6rpx 16rpx rgba(0, 0, 0, 0.1);
				border-radius: 16rpx;

				// padding: 0 52rpx 0 32rpx;
				.demo-layout {
					@include str(28rpx, 500, #333);
					text-align: center;
					// line-height: 40rpx;
				}
			}

			.table {
				width: 100%;
				line-height: 145rpx;
				box-shadow: 0px 6rpx 16rpx rgba(0, 0, 0, 0.1);
				border-radius: 16rpx;
				padding: 28rpx 0;
				margin-top: 20rpx;

				.demo-layout1 {
					
				}
			}
		}

		.bottom_btn {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 0rpx;
			box-shadow: 0rpx -3rpx 20rpx rgba(0, 0, 0, 0.06);
			z-index: 999;
			// .addCar {
			// 	width: 100%;
			// 	line-height: 74rpx;
			// 	background: $uni-color-primary;
			// 	border-radius: 37rpx;
			// 	@include str(32rpx, 500, #fff);
			// }
		}
	}
</style>